<template>
  <div class="user-wrapper user-setup">
    <div class="user-title">
      <van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'user' }" />
      {{ $t('User.setup') }}
    </div>
    <van-cell-group>
      <van-cell
        is-link
        :title="$t('User.push_msg')"
        @click="pushMsg">
        <template>
          <van-switch
            v-model="checked"
            @click="switchChange" />
        </template>
      </van-cell>
      <van-cell
        is-link
        :title="$t('User.lang')"
        :value="language"
        @click="changeLang=true">
      </van-cell>
    </van-cell-group>
    <van-button
      v-if="isLogin"
      class="block-btn"
      @click="logout">
      {{ $t('User.logout') }}
    </van-button>
    <!-- 切换语言 -->
    <van-action-sheet
      v-model="changeLang"
      :actions="actions"
      :cancel-text="$t('User.cancel')"
      @select="onSelect" />
    <van-loading class="full-loading" v-if="showLoading" type="spinner" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      checked: true,
      changeLang: false,
      showLoading: false,
      language: 'CN',
      actions: [{
        name: '中文',
        code: 'CN',
        subname: '当前',
      }, {
        name: 'English',
        code: 'En',
        subname: '',
      }]
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取当前用户信息
    getUserInfo() {
      this.$jsBridge.JsGetLoginInfo(res => {
        if (res.code === 0) {
          if (res.data.username) {
            this.isLogin = true;
          };
        }
      });
    },
    pushMsg() {

    },
    switchChange() {
      this.showLoading = true;
    },
    onSelect(item) {
      if (item.code !== this.language) {
        // 切换语言弹窗
        this.changeLang = false;
        this.$dialog.confirm({
          title: this.$t('User.change_lang'),
          message: this.$t('User.change_lang_tip'),
          beforeClose: this.toChangeLang,
        });
      }
    },
    toChangeLang(action, done) {
      if (action === 'confirm') {
        this.$jsBridge.JsChangeLanguage(true, res => {
          if (res.code === 0) {
            done();
          };
        });
      } else {
        done();
      }
    },
    logout() {
      this.$jsBridge.JsGoToExitLogin();
    },
  }
};
</script>

<style lang="less" scoped>
  .van-cell-group{margin-top: 30px;}
  .van-cell{
    height: 90px;
    line-height: 90px;
  }
  .van-switch{
    vertical-align: middle;
    background: #b4b4b4;
  }
  .van-switch--on{background: @blue;}
  .van-action-sheet__subname{margin-left: 10px;}
  .full-loading{
    top: 0;
    background: rgba(0, 0, 0, .4);
  }
  .block-btn{
    width: 540px;
    position: fixed;
    left: 50%;
    bottom: 80px;
    background: #C7C7C7;
    margin-left: -275px;
  }
</style>
